<script lang="ts" setup name="SupplierDialog">
import { FormInstance } from 'element-plus'
import { Information } from '~/src/api/interface/information'
import { System } from '~/src/api/interface/system'
import { updateValueBasedOnDicType } from '~/src/utils'

const rules = reactive({
  name: [{ required: true, message: '请填写供应商名称' }],
  supplierCode: [{ required: true, message: '请填写供应商编码' }],
  helpCode: [{ required: true, message: '请填写助记码' }],
  businessType: [{ required: true, message: '请选择经营方式' }],
  settleType: [{ required: true, message: '请选择结账方式' }],
  regionId: [{ required: true, message: '请选择供应商区域' }],
})

interface DialogProps {
  title: string
  isView: boolean
  areaList: any[]
  row: Partial<Information.SupplierList>
  api?: (params: any) => Promise<any>
  getTableList?: () => void
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  isView: false,
  title: '',
  row: {},
  areaList: [],
})
const operateWay = ref<System.ResDictList[]>([])
const settleTypes = ref<System.ResDictList[]>([])
// 接收父组件传过来的参数
const acceptParams = async (params: DialogProps) => {
  dialogProps.value = params
  updateValueBasedOnDicType('OperateWay', operateWay)
  updateValueBasedOnDicType('SettleType', settleTypes)
  dialogVisible.value = true

  if (!dialogProps.value.row.regionId) {
    dialogProps.value.row!.regionId = dialogProps.value.areaList[0].id
  }
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.row)
      ElMessage.success({ message: `${dialogProps.value.title}供应商成功！` })
      dialogProps.value.getTableList ? dialogProps.value.getTableList!() : null
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams,
})
</script>

<template>
  <vab-dialog v-model:modelValue="dialogVisible" :title="`${dialogProps.title}供应商`" width="800px">
    <el-form
      ref="ruleFormRef"
      :disabled="dialogProps.isView"
      :hide-required-asterisk="dialogProps.isView"
      label-suffix=" :"
      label-width="140px"
      :model="dialogProps.row"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商编码" prop="supplierCode">
            <el-input v-model="dialogProps.row!.supplierCode" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="供应商名称" prop="name">
            <el-input v-model="dialogProps.row!.name" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="助记码" prop="helpCode">
            <el-input v-model="dialogProps.row!.helpCode" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="供应商区域" prop="regionId">
            <el-select v-model="dialogProps.row!.regionId">
              <el-option v-for="item in dialogProps.areaList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系人" prop="contact">
            <el-input v-model="dialogProps.row!.contact" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="dialogProps.row!.mobile" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="结账方式" prop="settleType">
            <el-select v-model="dialogProps.row!.settleType">
              <el-option v-for="item in settleTypes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="dialogProps.row!.settleType === 3" label="结账周期" prop="checkOutCycle">
            <el-input-number v-model="dialogProps.row!.checkOutCycle" class="w100" :controls="false" placeholder="请填写" />
          </el-form-item>
          <el-form-item v-if="dialogProps.row!.settleType === 4" label="月结账日期" prop="monCheckCyclse">
            <el-input-number v-model="dialogProps.row!.monCheckCyclse" class="w100" :controls="false" placeholder="请填写" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开户行" prop="bank">
            <el-input v-model="dialogProps.row!.bank" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="开户行账号" prop="bankAccount">
            <el-input v-model="dialogProps.row!.bankAccount" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="营业执照编号" prop="businessLicense">
            <el-input v-model="dialogProps.row!.businessLicense" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="税务登记号" prop="taxCode">
            <el-input v-model="dialogProps.row!.taxCode" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="联系地址" prop="contactAddress">
            <el-input v-model="dialogProps.row!.contactAddress" placeholder="请填写" />
          </el-form-item>
          <el-form-item label="经营方式" prop="businessType">
            <el-select v-model="dialogProps.row!.businessType">
              <el-option v-for="item in operateWay" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="dialogProps.row!.businessType !== 1" label="商户提成率%" prop="commissionRate">
            <el-input-number v-model="dialogProps.row!.commissionRate" class="w100" :controls="false" placeholder="请填写" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
